<template>
  <view class="goods-item">
    <!-- 左边图片 -->
    <view class="item-left">
      <slot name="checked"></slot>
      <image
        :src="goods.goods_small_logo || defaultPic"
        class="goods-img"
      ></image>
    </view>
    <!-- 右边信息 -->
    <view class="item-right">
      <view class="goods-name">{{ goods.goods_name }}</view>
      <view class="goods-priceAndNum">
        <view class="goods-price">¥{{ goods.goods_price | tofixed }}</view>
        <slot name="num"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'goods-list',
  props: {
    goods: {
      type: Object
    }
  },
  data() {
    return {
      defaultPic:
        'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png' //默认图片地址
    }
  },
  filters: {
    tofixed(num) {
      return Number(num).toFixed(2)
    }
  }
}
</script>

<style lang="scss">
.goods-item {
  display: flex;
  border-bottom: 1px solid #f0f0f0;

  .item-left {
    .goods-img {
      height: 100px;
      width: 100px;
      padding: 5px;
      margin-right: 5px;
    }
  }

  .item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .goods-name {
      font-size: 14px;
    }
    .goods-priceAndNum {
      .goods-price {
        color: red;
      }
    }
  }
}
</style>
